<template>
    <view>
        <view class="container" >
            <view>
				<view class="payment1 " v-if="show">
						<view class="tpp1">
							<view class="del" @click="close">
							 <image src="../../static/tuichu.png" mode=""></image>
							</view>
							<view class="con">
								<image :src="shareimg" mode=""></image>
							</view>
							<view class="tex">
								{{shareTitle}}
							</view>
							<view class="sao">
								让好友扫码帮忙砍更多
							</view>
							<view class="erwei">
								<view class="qrcode">
								  
									<image  :src="url" mode="widthFix" style="width:310upx;border-radius: 10upx;"></image>
								</view>
							</view>
							<view class="ff">
								长按保存,可直接app面对面扫码,也可微信扫码进入公众号
							</view>
						</view>
				    </view>				
            </view>
			  <canvas canvas-id="qrcode" v-if ="url == '' " style="opacity: 0;"></canvas>
        </view>
    </view>
</template>

<script>
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode'
    export default {
		props: {
			shareType: {
				type: String
			},
			shareUrl: {
				type: String
			},
			shareimg: {
				type: String
			},
			shareTitle: {
				type: String
			},
			isShow:{
				type: Boolean
			}
		},
        data() {
            return {
				url : '',
				show : false
            }
        },
        created(){
            this.make()
        },
		methods: {
			make() {
			    console.log(this.shareUrl)
				
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: this.shareUrl,
					size:155,
					margin: 8,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.defaults.correctLevel,
					success: res => {
						console.log(res)
						this.url = res;
						this.show = true;
						
					}
				})
			},
			close() {
				this.$emit("isShowShare","")
			}
		}
    }
</script>

<style lang="less">
	//隐藏框1
	.payment1 {
	  position: absolute;
	  width: 80%;
	  top: 50%;
	  transform: translate(0,-50%);
	  left: 10%;
	  padding: 15upx;
	  box-sizing: border-box;
	  background:linear-gradient(180deg,rgba(255,113,113,1) 0%,rgba(255,0,0,1) 100%);
	  border-radius: 20upx;
	  z-index: 10;
	
		.tpp1 {
			position: relative;
			// background:linear-gradient(180deg,rgba(255,113,113,1) 0%,rgba(255,0,0,1) 100%);
			width: 100%;
			height: 100%;
			border-radius: 20upx;
			text-align: center;
			border: 1px solid rgba(255,220,109,1);
			.ff {
				width: 344upx;
				color: #FFFFFF;
				font-size: 24upx;
				margin: 20upx auto 30upx;
				text-align: left;
			}
			.erwei {
				padding: 10upx;
				border-radius: 20upx;
				.qrcode {
			
				}
			}
			.sao {
				color: #FFFFFF;
				letter-spacing:1px;
				font-family:PingFangSC-Medium,PingFang SC;
				font-size: 32upx;
				margin-bottom: 10rpx;
			}
			.tex {
				color: #FFFFFF;
				width: 260upx;
				letter-spacing:1px;
				font-family:PingFangSC-Regular,PingFang SC;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: inline-block;
				vertical-align: middle;
			}
			.con {
				width: 106upx;
				height: 106upx;
				border-radius: 50%;
				background-color: #FFFFFF;
				display: inline-block;
				vertical-align: middle;
				margin: 40upx 20upx 28upx 0;
				image {
					width: 106upx;
					height: 106upx;
					border-radius: 100%;
				}
			}
			.del {
				  position: absolute;
				  right: 25upx;
				  top: 25upx;
				  width: 30upx;
				  height: 30upx;
				  image {
					  width: 100%;
					  height: 100%;
					}
				}
		}
	}
    .container {
        position: fixed;
        width: 100%;
        z-index: 1000;
        height: 100vh;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
    }

  
</style>
